<template>
	<view class="index">
		<!-- 头部字体 -->
		<view class="moyuntext">
			<view class="bigfont">墨运</view>
			<view class="smallfont">一款缓解快递末端运输的小程序</view>
		</view>
		<!-- 轮播图 -->
		<view class="banner">
			<swiper class="swiper" indicator-dots indicator-color="rgb(255,255,244,0.6)" indicator-active-color="#4D97EB" autoplay="true" duration=500 circular interval=3000>
				<!-- <swiper-item class="swiperitem" v-for="item in 4">
					<image class="swiperimg" src="https://preview.qiantucdn.com/58pic/Ps/jD/p1/5W/7265o4v8htjexryqpin0buzdc9m13gwk_PIC2018.png!qt_h320" mode="aspectFill"></image>
				</swiper-item> -->
				<swiper-item class="swiperitem">
					<image class="swiperimg" src="/common/images/2.png" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item class="swiperitem">
					<image class="swiperimg" src="/common/images/33.jpg" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item class="swiperitem">
					<image class="swiperimg" src="/common/images/1667529971233.png" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item class="swiperitem">
					<image class="swiperimg" src="/common/Otherimages/unnamed.jpg" mode="aspectFill"></image>
				</swiper-item>
				
			</swiper>
		</view>
		<!-- 标签滚动区域 -->
		<view class="scroll">
			<scroll-view class="scrollview" scroll-x show-scrollbar="false">
			<!-- 	<button class="smallbox" v-for="item in 3">小型物件</button> -->
				<view class="smallbox" scroll-x >
					<view class="minibox" @click="onbox1">最新发布</view>
				</view>
				<view class="smallbox" scroll-x >
					<view class="minibox" @click="onbox2">墨币抵扣</view>
				</view>
				<view class="smallbox" scroll-x >
					<view class="minibox" @click="onbox3">小型物件</view>
				</view>
				<view class="smallbox" scroll-x >
					<view class="minibox" @click="onbox4">衣服服装</view>
				</view>
			</scroll-view>
			
			<!-- 筛选按钮 -->
			<view class="choosebox" @click="onClick">
				<view class="choose" >筛选</view>
				<uni-icons type="right" size="15" color="#9249DD"></uni-icons>
			</view>
		</view>
		<!-- 浏览区域 -->
		<view class="browse">
			<browsePage :boxnumber="boxnumber"></browsePage>
		</view>
		<!-- 筛选弹窗 -->
		<uni-popup class="popup" ref="popup" is-mask-click="true" type="bottom">
			<view class="popbox">
				<view class="price">
					<view class="pricetitle">
						价格区间 （元）
					</view>
					<view class="pricebox1">
						<input placeholder="" />
					</view>
					<view class="to">
						—
					</view>
					<view class="pricebox2">
						<input placeholder="" />
					</view>
				</view>
				<!-- 收货 -->
				<view class="good">
					<view class="text">
						收货范围填写
					</view>
					<view class="goodbox">
						<input placeholder="填写距你多少米,如100米" />
					</view>
				</view>
				<!-- 按钮 -->
				<view class="button">
					<button class="cancel" @click="onClose">取消</button>
					<button class="yes" @click="onYes">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
	
</template>

<script setup>
import {ref} from "vue"
import { onLoad } from '@dcloudio/uni-app'
// 调用Pinia拿取token
import { useUserMemberStore} from "/stores/usermember.js"
// 导入api接口
import {isTrueToken, apiGetALLOrder} from "/api/apis.js"
const member=useUserMemberStore();
const popup=ref(null)
// 定义浏览区显示不同内容
const boxnumber=ref(1);
// 定义父传子
const toson=ref(null);
// // 检验是否token失效
// async function checkToken(){
// 	let res;
// 	try{
// 		console.log("检验token失效性")
// 		res =await isTrueToken();
// 		console.log("this is  res",res)
// 	}catch(error){
// 		if(error.message=='token非法无效!'){
// 			uni.showToast({
// 				title:'token失效请重新登录',
// 				icon:'none',
// 				duration:3000
// 			})
// 			uni.navigateTo({
// 				 url: '/pages/login/login',
// 			})
		
// 		}
// 		console.error("token失效性：",error&&error.message);
// 	}
// 	// console.log(res)
// }
// checkToken();
// 定义接收请求的userid
const userIDArr=ref([]);
// 实现筛选按钮
const onClick=()=>{
	console.log("dianji");
	popup.value.open();
}
const onClose=()=>{
	popup.value.close();
}
const onYes=()=>{
	popup.value.close();
	// 给子组件赋值
	boxnumber.value=5
	uni.showToast({
		title:`筛选成功`,
		icon:"succes"
	})
}


// // 获取全部订单信息
// async function getAllOrder(){
// 	let res;
// 	try{
// 		console.log('开始订单ing')
// 		res= await apiGetALLOrder();
// 		// console.log("token:",member.token);
// 		console.log("首页全部订单",res);
// 		// console.log("结束订单");
// 		// 对获取的订单进行操作
// 		const slicedData = res.result.slice(10); // 截取从第11组开始的所有数据
// 		console.log("sliceData:",slicedData)
// 		// 拿取收件人id号与查询用户ID
// 		userIDArr.value=slicedData.map(item=>item.userReceiverId)
// 		console.log("这是userIDARR：",userIDArr)
		
		
		
// 	}catch(error){
// 		console.log("获取订单错误")
// 		uni.showToast({
// 			title:"首页获取订单错误",
// 			icon:"fail"
// 		})
// 		console.log("首页订单：",error);
// 		// 如果token无效，重定向到登录界面获取token
// 		if(error.message=='token非法无效!'){
// 			uni.showToast({
// 				title:'token失效请重新登录',
// 				icon:'none',
// 				duration:3000
// 			})
// 			uni.navigateTo({
// 				 url: '/pages/login/login',
// 			})
		
// 		}
// 	}
// 	// console.log(res);
	
// }
// getAllOrder();
// // 获取用户ID信息和用户头像，用户名
// async function getUserID(){
// 	let result=[];
// 	try{
// 		for(int i=0;i<userIDArr.value.length;++i){
// 			let res=await apiGetUserInfo(userIDArr[i])
// 			result.push(res)
// 		}
		
// 	}catch(error){
// 		console.log("获取用户ID信息失败",error.message)
		
// 	}
// }

// // 发起浏览区请求，
// function getbrowse(){
// 	uni.request({
// 		url:'http://129.204.87.250:8080/jeecg-boot/moyunOrderInformation/moyunOrderInformation/selectAllOrder',
// 		method:"GET",
// 		header:{
// 			'X-Access-Token':member.token
// 		},
// 		success:(res)=>{
// 			uni.showToast({
// 			  title: "正在发送请求",
// 			  icon: "none"
// 			});
			
// 		const slicedData = res.data.result.slice(10); // 截取从第11组开始的所有数据
// 		console.log(slicedData);
// 		uni.showToast({
// 		  title: "发送请求",
// 		  icon: "none"
// 		});
			
// 		},
// 		fail:(err)=>{
// 			console.log(err)
// 		}
// 	})
// }
// console.log("发起getbrowse请求")
// getbrowse();
// console.log("借宿getbrowse请求")
// 点击第一个最新发布
const onbox1=()=>{
	boxnumber.value=1;
	// uni.showToast({
	// 	title:`最新发布`,
	// 	icon:"none"
	// })
}
// 墨币抵扣
const onbox2=()=>{
	boxnumber.value=2;
	// uni.showToast({
	// 	title:`墨币抵扣`,
	// 	icon:"none"
	// })
}
// 小型物件
const onbox3=()=>{
	boxnumber.value=3;
	// uni.showToast({
	// 		title:`小型物件`,
	// 		icon:"none"
	// 	})
}
// 衣服服装
const onbox4=()=>{
	boxnumber.value=4;
	// uni.showToast({
	// 		title:`衣服服装`,
	// 		icon:"none"
	// 	})
}

</script>

<style lang="scss" scoped>
@keyframes gradientFlow {
 0% { background-position: 0% 0%; }
   25% { background-position: 50% 0%; }
   50% { background-position: 25% 0%; }
   75% { background-position: 75% 0%; }
   100% { background-position: 100% 0%; }
}
@font-face {
  font-family: "阿里妈妈刀隶体 Regular";
  font-weight: 400;
  src: url("//at.alicdn.com/wf/webfont/733Eb6B5swG2/lHPYtpKG6t20.woff2") format("woff2"),
       url("//at.alicdn.com/wf/webfont/733Eb6B5swG2/roQ4I7g8u96V.woff") format("woff");
  
  font-display: swap;
}
@font-face {
  font-family: "阿里妈妈刀隶体 Regular1";
  font-weight: 400;
 src: url("//at.alicdn.com/wf/webfont/733Eb6B5swG2/ibwxPjtEHJTA.woff2") format("woff2"),
    url("//at.alicdn.com/wf/webfont/733Eb6B5swG2/8txPPRXgVDt8.woff") format("woff");
  
  font-display: swap;
}
.index{
	
	// 定义首页样式
	// background: radial-gradient(24.15% 85.7% at 10.29% 4.18%, rgba(0, 40, 250, 0.11) 0%, rgba(171, 133, 0, 0.05) 31.62%, rgba(0, 255, 148, 0.06) 62.15%, rgba(0, 0, 0, 0.00) 100%), radial-gradient(25.63% 91.04% at 96.26% 3.9%, rgba(143, 0, 255, 0.20) 0%, rgba(255, 193, 101, 0.09) 39.68%, rgba(192, 253, 253, 0.20) 80.6%, rgba(255, 255, 255, 0.20) 100%);
	// background: radial-gradient(24.15% 85.7% at 10.29% 4.18%, rgba(0, 40, 250, 0.11) 0%, rgba(171, 133, 0, 0.05) 31.62%, rgba(0, 255, 148, 0.06) 62.15%, rgba(0, 0, 0, 0.00) 100%), radial-gradient(25.63% 91.04% at 96.26% 3.9%, rgba(143, 0, 255, 0.20) 0%, rgba(255, 193, 101, 0.09) 39.68%, rgba(192, 253, 253, 0.20) 80.6%, rgba(255, 255, 255, 0.20) 100%);
	background: linear-gradient(179deg, rgba(98, 29, 243, 0.17) 3.57%, rgba(255, 125, 125, 0.10) 12.6%, rgba(255, 140, 140, 0.11) 22.62%, rgba(255, 255, 255, 0.20) 98.13%), radial-gradient(24.15% 85.7% at 10.29% 4.18%, rgba(0, 40, 250, 0.11) 0%, rgba(171, 133, 0, 0.05) 31.62%, rgba(0, 255, 148, 0.06) 62.15%, rgba(0, 0, 0, 0.00) 100%), radial-gradient(25.63% 91.04% at 96.26% 3.9%, rgba(143, 0, 255, 0.20) 0%, rgba(255, 193, 101, 0.09) 39.68%, rgba(192, 253, 253, 0.20) 80.6%, rgba(255, 255, 255, 0.20) 100%);
	 background-size: 250% 100%; /* 增大背景尺寸以允许平滑过渡 */
	 animation: gradientFlow 15s linear alternate-reverse infinite; /* 添加动画效果 */
	// margin-top:60rpx;
	padding:10rpx ;
	
	// 定义墨运标题样式
	.moyuntext{
		padding:0rpx 30rpx;
		// padding-bottom: 14rpx;
		.bigfont{
			padding-bottom: 7rpx;
			color: #000;
			// font-family: "Noto Sans SC";
			font-family: "阿里妈妈刀隶体 Regular"; /* 替换此处的字体 */
			font-size: 21px;
			font-style: normal;
			font-weight: 400;
			line-height: 144.662%; /* 30.379px */
		}
		.smallfont{
			color: rgba(0, 0, 0, 0.70);
			padding-left: 50rpx;
			// font-family: "Noto Sans SC";
			font-family: "阿里妈妈刀隶体 Regular1"; /* 替换此处的字体 */
			font-size: 13px;
			font-style: normal;
			font-weight: 400;
			line-height: 144.662%; /* 15.913px */
		}
	}
	// 定义轮播图样式
	.banner{
		// width: 100%;
		width: 682rpx;
		height: 320rpx;
		marign-left:30rpx;
		// padding-left: 30rpx;
		margin:20rpx 25rpx;
		border-radius: 64rpx;
		// border:1px solid #000;
		// box-shadow: -3px 7px 2.7px 0px rgba(0, 0, 0, 0.25);
		.swiper{
			width:100%;
			height:100%;
			border-radius: 50rpx;
			// border: 1px solid #000;
			box-sizing:border-box;
			.swiperitem{
				width:100%;
				height:100%;
				border-radius: 50rpx;
				box-sizing:border-box;
				padding:0rpx 30rpx;
				// box-shadow: -3px 7px 2.7px 0px rgba(0, 0, 0, 0.25);
				.swiperimg{
					// padding:5rpx;
					width:100%;
					height:100%;
					border-radius: 50rpx;
					// box-size:border-box;
				}
			}
		}
	}
	// 定义标签样式
	.scroll{	
		
		width:100%;
		height: 70rpx;
		// padding-left:30rpx;
		margin:21rpx;
		// background:#000;
		display: grid;
		grid-template-columns: 70% auto; /* 第一列占 70%，第二列自动填充剩余空间 */
		grid-gap: 20rpx; /* 在两列之间添加间距 */
		border-radius: 20rpx;
		.scrollview{
			// display: flex;
			// flex-direction: row;
			// width:70%;
			// border:1rpx solid #000;
			width: 514rpx;
			height:80rpx;
			margin-left:20rpx;
			white-space: nowrap;
			border-radius: 20rpx;
			.smallbox{	
				margin-left: 5rpx;
				margin-top: 5rpx;
				margin-right: 30rpx;
				// border:1rpx solid #000;
				display:inline-block;
				
				width: 99rpx;
				height: 60rpx;
				border-radius: 20rpx;
				background: linear-gradient(270deg, rgba(138, 213, 255, 0.56) 10.72%, rgba(255, 191, 191, 0.85) 88.1%);		
				box-shadow: 0px 0px 2.7px 0px rgba(0, 0, 0, 0.25) inset, 0px -4px 6.8px 0px #FFF inset, 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
				filter: blur(0.25px);
				// background:#fff;
				.minibox{
					margin-top:15rpx;
					// border:1rpx solid #000;
					color: #000;	
					text-align: center;
					font-family: "Noto Sans SC";
					font-size: 20rpx;
					font-style: normal;
					font-weight: 500;
					line-height: normal;
				}
			}
		}
		.choosebox{
			width:120rpx;
			height: 100%;
			display:flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			// border:1rpx solid #000;
			.choose{
				color: #000;
				text-align: center;
				font-family: "Noto Sans SC";
				font-size: 30rpx;
				font-style: normal;
				font-weight: 500;
				line-height: normal;
				margin-right:10rpx;

			}
			
		}
		
	}
	// 定义浏览区样式
	.browse{
		// margin:30rpx;
		// padding:50rpx;
	}
}
// 实现底部筛选弹窗
.popup{
	.popbox{
		position:relative;
		width: 642rpx;
		height: 842rpx;
		margin-left: 55rpx;
		border-radius: 38px 38px 0px 0px;
		background: rgba(237, 228, 255, 1);
		box-shadow: 6px 4px 11px 0px rgba(0, 0, 0, 0.25);
		.price{
			display:flex;
			margin-left: 80rpx;
			padding-top: 118rpx;
			
			.pricetitle{
				position: absolute;
				left: 52rpx;
				top: 40rpx;
			}
			.pricebox1{
				// position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				padding-left:30rpx;
				// left:80rpx;
				// top: 118rpx;
				width: 164rpx;
				height: 88rpx;
				border-radius: 13px;
				background: #D9D9D9;
				box-shadow: 0px 2px 5.7px 0px rgba(0, 0, 0, 0.25) inset;
			}
			.pricebox2{
				// position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				padding-left:30rpx;
				// left: 344rpx;
				// top: 118rpx;
				width: 164rpx;
				height: 88rpx;
				border-radius: 13px;
				background: #D9D9D9;
				box-shadow: 0px 2px 5.7px 0px rgba(0, 0, 0, 0.25) inset;
			}
			.to{
				// position: relative;
				margin: 22rpx;
				top:118rpx;
				left: 296rpx;
			}
		}
		// 收货范围
		.good{
			.text{
				position: relative;
				left: 58rpx;
				top: 50rpx;
			}
			.goodbox{
				display: flex;
				align-items: center;
				justify-content: center;
				padding-left:0rpx;
				margin-left: 76rpx;
				margin-top: 90rpx;
				width: 480rpx;
				height: 88rpx;
				border-radius: 13px;
				background: #D9D9D9;
				box-shadow: 0px 2px 5.7px 0px rgba(0, 0, 0, 0.25) inset;
			}
		}
		// button样式
		.button{
			display: flex;
			margin-top: 130rpx;
			// border:1px solid #000 ;
			.cancel{
				width:220rpx;
				height:92rpx;
				display: inline-flex;
				justify-content: center;
				align-items: center;
				gap: 10px;
				border-radius: 17px;
				background: #D0E0FF;
				box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
				
			}
			.yes{
				width:220rpx;
				height:92rpx;
				display: inline-flex;
				justify-content: center;
				align-items: center;
				gap: 10px;
				border-radius: 17px;
				background: #FEDFA2;
				box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
			}
		}
		
	}
}

</style>
